<style lang="scss" scoped>
.dashboard {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 1920px;
  height: 1080px;
  background: url("../assets/img/logo.png") top no-repeat;
  & > div {
    position: absolute;
    // border: solid 1px rgba(255, 255, 255, 0.2);
  }
}

.title {
  top: 50px;
  left: 30px;
  font-size: 40px;
  color: white;
}
.bg-title {
  position: absolute;
  top: 34px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 464px;
  height: 26px;
  font-size: 35px;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  color: #fff;
}

.doughnut {
  top: 107px;
  left: 26px;
  width: 450px;
  height: 198px;
  // border: solid 1px rgba(255, 255, 255, 0.2);
}

.point {
  top: 356px;
  left: 26px;
  width: 450px;
  height: 324px;
  // border: solid 1px rgba(255, 255, 255, 0.2);
}

.line {
  left: 26px;
  bottom: 34px;
  width: 450px;
  height: 314px;
}
.title-box {
  left: 501px;
  width: 911px;
  margin-top: 130px;
  height: 58px;
  display: flex;
}
.title-center {
  display: flex;
  position: relative;
  // background-color: #fff;
  flex: 1;
  // margin: 3px 3px;
  // justify-content: space-between;
  font-size: 20px;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  text-align: center;
  // color: #48eaff;
  color: #fff;
  // text-align: center;
  margin: 0 4px;
}
.title-center .ly-tz {
  flex: 1;
  text-align: center;
  line-height: -58px;
  // background-color: #fff;
}

.panel-hight {
  a {
    color: #48eaff;
  }
  position: relative;
  border: 6px solid transparent;
  border-width: 14px;
  border-image-source: url("../assets/img/title-hight.png");
  border-image-slice: 16;
}

// .map {
//   left: 550px;
//   top: 152px;
//   width: 850px;
//   height: 715px;
// }

.bar {
  left: 506px;
  bottom: 34px;
  width: 911px;
  height: 254px;
}

.pie-char {
  right: 27px;
  top: 107px;
  width: 450px;
  height: 208px;
  // border: solid 1px rgba(255, 255, 255, 0.2);
}

.gauge {
  top: 356px;
  right: 27px;
  width: 450px;
  height: 324px;
  // border: solid 1px rgba(255, 255, 255, 0.2);
}

.double-line {
  right: 27px;
  bottom: 34px;
  width: 450px;
  height: 314px;
}

// .fullscreen-button {
//   top: 20px;
//   width: 200px;
//   height: 40px;
//   font-size: 25px;
//   color: white;
//   right: 30px;
//   border-radius: 8px;
//   color: #e9d70c;
// }
</style>
<template>
  <div class="dashboard">
    <div class="bg-title">星云智慧园</div>
    <!-- <div class="title">Dashboard</div> -->
    <!-- <div class='fullscreen-button' @click='toggleFullscreen'>toggle fullscreen</div> -->
    <div class="doughnut panel">
      <div class="public ">园区信息</div>
      <doughnut></doughnut>
    </div>
    <div class="point panel">
      <div class="public ">企业分布</div>
      <point></point>
    </div>
    <div class="line panel">
      <div class="public ">配置设施分布</div>
      <line-chart></line-chart>
    </div>
    <div class="line-y-ca"></div>
    <div class="title-box">
      <div
        class="panel-title title-center"
        :class="activeClass == index ? 'panel-hight' : ''"
        v-for="(item, index) in itemList"
        :key="index"
        @click="getItem(index)"
      >
        <router-link :to="item.link" class="ly-tz">{{ item.name }}</router-link>
      </div>
    </div>
    <div class="map">
      <!-- <Map></Map> -->
    </div>
    <div class="bar panel">
      <div class="public ">人车数量统计</div>
      <bar></bar>
    </div>
    <div class="pie-char panel">
      <div class="public ">环境实时监测</div>
      <pie></pie>
    </div>
    <div class="gauge panel">
      <div class="public ">工单处理统计</div>
      <gauge></gauge>
    </div>
    <div class="double-line panel">
      <div class="public ">告警统计</div>
      <double-line></double-line>
    </div>
  </div>
</template>

<script>
import Doughnut from "@/components/charts/Doughnut";
import Point from "@/components/charts/Point";
import LineChart from "@/components/charts/Line";
import Map from "@/components/charts/Map";
import Bar from "@/components/charts/Bar";
import Pie from "@/components/charts/Pie";
import Gauge from "@/components/charts/Gauge";
import DoubleLine from "@/components/charts/DoubleLine";

export default {
  name: "Home",
  components: {
    Doughnut,
    Point,
    Map,
    LineChart,
    Bar,
    Pie,
    Gauge,
    DoubleLine,
  },
  data() {
    return {
      isFullScreen: false,
      activeClass: 0,
      itemList: [
        { name: "园区综合态势", link: "/home" },
        { name: "综合安防", link: "/Zhaf" },
        { name: "资产管理", link: "/Zcgl" },
        { name: "能耗管理", link: "/Nhgl" },
        { name: "环境监测", link: "/Hjjc" },
      ],
    };
  },
  methods: {
    getItem(index) {
      this.activeClass = index;
    },
    // toggleFullscreen() {
    //   if (this.isFullScreen) {
    //     this.exitFullScreen()
    //   } else {
    //     this.launchFullScreen(document.documentElement)
    //   }
    //   this.isFullScreen = !this.isFullScreen
    // },
    launchFullScreen(element) {
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      }
    },
    exitFullScreen() {
      if (document.exitFullscreen) {
        document.exitFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    },
  },
};
</script>
